<template>
  <div class="fenlei-menu">
    <div class="flex-dis">
      <div class="top-title border-bottom">
      <span class="i-wrapper" @click.stop="goBack">
        <i class="iconfont icon-arrow-left"></i>
      </span>
        <span class="search-box-wrapper">
        <search-box ref="searchBox" @ifocus.stop="ifocus"></search-box>
      </span>
        <span class="dosearch-wrapper">分类菜单</span>
      </div>
      <div class="menu-wrapper">
        <scroll class="menu-left" :data="menus">
          <ul>
            <li class="menu_lv1 border-rightbottom" :class="getLeftMenuCls(index)" v-for="(lv1Item, index) in menus" :key="index" @click.stop="selectMenuLv1(index)">
              {{lv1Item.menuText}}
            </li>
          </ul>
        </scroll>
        <div class="menu-right">
          <scroll class="cls-scroll" :data="currentMenuItemChildren" ref="menuRightScroll">
            <div>
              <div class="spec_class border-left" v-show="currentMenuIndex === 0">
                <ul>
                  <li v-for="(itemLv2, ind2) in currentMenuItem.children" :key="ind2" class="lv1_title border-bottom">
                    <a target="_blank" :href="itemLv2.href"><div>{{itemLv2.menuText}}</div><span class="icon-wrapper"><i class="iconfont icon-jiantouyou"></i></span></a>
                  </li>
                </ul>
              </div>
              <div class="normal_class border-left" v-show="currentMenuIndex > 0">
                <a target="_blank" :href="currentMenuItem.href">
                <div class="lv1_title">
                  {{currentMenuItem._menuText}}
                  <span class="icon-wrapper"><i class="iconfont icon-jiantouyou"></i></span>
                </div>
                </a>
                <div class="lv2-wrapper" v-show="currentMenuItem && currentMenuItem.children">
                  <ul>
                    <li v-for="(itemLv2, ind2) in currentMenuItem.children" :key="ind2">
                      <div class="lv2-title border-topbottom">{{itemLv2._menuText}}</div>
                      <ul v-show="itemLv2.children" class="lv3-wrapper">
                        <li v-for="(itemLv3, ind3) in itemLv2.children" class="lv2-item" :key="ind3">
                          <a target="_blank" :href="itemLv3.href" @click.prevent="selectLv3Item(itemLv3.href)">
                            <span>{{itemLv3._menuText}}</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box'
import menus from '@/config/menu'
import Scroll from 'base/scroll/scroll'
import { mapMutations } from 'vuex'

export default {
  name: 'fenlei-menu',
  components: { SearchBox, Scroll },
  data () {
    return {
      menus: menus,
      currentMenuIndex: 0
    }
  },
  computed: {
    currentMenuItem () {
      return menus[this.currentMenuIndex]
    },
    currentMenuItemChildren () {
      return menus[this.currentMenuIndex].children
    }
  },
  methods: {
    selectLv3Item (url) {
      this.setFenleiDetailUrl(url)
      this.$router.push({ name: 'fenleiDetailPage' })
    },
    selectMenuLv1 (ind) {
      this.currentMenuIndex = ind
    },
    getLeftMenuCls (ind) {
      return this.currentMenuIndex === ind ? 'active' : ''
    },
    goBack () {
      this.$router.back()
    },
    ifocus () {
      this.$store.commit('SET_SEARCH_VIEW_STATE', true)
    },
    ...mapMutations({
      setFenleiDetailUrl: 'SET_FENLEI_DETAIL_URL'
    })
  },
  mounted () {
    let menuRightHeight = this.$refs.menuRightScroll.$el.clientHeight
    // console.log('menuRightWrapper height', menuRightHeight)
    this.$refs.menuRightScroll.setWrapperHeight(menuRightHeight)
  },
  activated () {
    this.$store.commit('SET_TABS_STATE', false)
    this.$store.commit('SET_SEARCH_TITLE', false)
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.fenlei-menu
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  .flex-dis
    display: flex
    height: 100%
    flex-direction: column
    justify-items: center
    .top-title
      flex: 0 0 40px
      height: 40px
      display: flex
      align-items: center
      .i-wrapper
        flex: 0 0 40px
        padding-left: 10px
        .icon-arrow-left
          font-size: 18px
      .search-box-wrapper
        flex: 1
        margin: auto auto
      .dosearch-wrapper
        flex: 0 0 100px
        text-align: center
        font-weight: 700
        font-size: 16px
    .menu-wrapper
      flex-grow: 1
      display: flex
      align-items: stretch
      .menu-left
        flex: 0 0 100px
        width: 100px
        .menu_lv1
          padding-left: 20px
          font-size: 14px
          color: black
          line-height: 38px
          font-weight: 400
          &.active
            background: #F04848
            color: #fff
      .menu-right
        flex: 1
        .cls-scroll
          height: 100%
          width: 100%
          overflow: hidden
          .spec_class
            .lv1_title
              font-size: 16px
              line-height: 40px
              padding: 0 20px
              color: #EEEEEE
              margin-bottom: 2px
              position: relative
              .icon-wrapper
                position: absolute
                right: 14px
                top: 0
                font-size: 18px
                line-height: 40px
                color: gray
          .normal_class
            .lv1_title
              font-size: 14px
              line-height: 30px
              padding: 0 20px
              background: #F36D6D
              color: #fff
              box-shadow: 2px 2px 2px #888888
              margin-bottom: 2px
              position: relative
              .icon-wrapper
                position: absolute
                right: 14px
                top: 0
                font-size: 16px
                line-height: 30px
                color: gray
            .lv2-wrapper
              .lv2-title
                font-size: 14px
                line-height: 30px
                padding: 0 20px
                background: #eaeaea
                border-bottom: 2px solid #B4B0AD
              .lv3-wrapper
                padding-bottom: 10px
                .lv2-item
                  display: inline-block
                  padding: 5px 8px
                  margin: 8px 8px 0px 10px
                  border-radius: 4px
                  font-size: 12px
                  line-height: 14px
                  border: 1px solid gray
</style>
